<template>
	<view class="rank-container">
		<!-- 加载中页面 -->
		<cumLoading v-show="loadPage"></cumLoading>
		<!-- 排行榜 -->
		<view class="rank-scroll-view-container-wb" v-show="!loadPage">
			<scroll-view class="rank-scroll-view-container" scroll-y @scrolltolower="get_lists">
				<!-- 头图header -->
				<view class="header">
					<image class="header-img" src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/2020-09-29wxls/other/skisVoteApp20240115/top.jpg" mode="widthFix"></image>
						<view class="myPrize" @click="enterMyCard">我的奖品</view>
				</view>
				<view class="rank-title">
					<view class="iconfont huaxueIcon">&#xe63d;</view>
					<view>票数排行榜</view>
					<view class="iconfont huaxueIcon">&#xe637;</view>
				</view>
				<view class="rank-centent">
					<view class="two-container-top">
						<view class="two-container matginT30">
							<view v-if="tableData.length > 1">
								<view class="img-two-container">
									<image class="img-two-img" :src="tableData[1].img"></image>
									<view class="img-two-bg">
										<image class="img-two-aaa" src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/2020-09-29wxls/other/skisVoteApp20240115/two.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="mingci">第2名</view>
								<view class="title">{{ tableData[1].title }}</view>
								<view class="voteNum">{{ tableData[1].voteNum }}票</view>
							</view>
						</view>
						<view class="two-container">
							<view v-if="tableData.length > 0">
								<view class="img-two-container img-one-container">
									<image class="img-two-img img-one-img" :src="tableData[0].img"></image>
									<view class="img-two-bg img-one-bg">
										<image class="img-two-aaa" src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/2020-09-29wxls/other/skisVoteApp20240115/one.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="mingci">第1名</view>
								<view class="title">{{ tableData[0].title }}</view>
								<view class="voteNum">{{ tableData[0].voteNum }}票</view>
							</view>
						</view>
						<view class="two-container matginT30">
							<view v-if="tableData.length > 2">
								<view class="img-two-container">
									<image class="img-two-img" :src="tableData[2].img"></image>
									<view class="img-two-bg">
										<image class="img-two-aaa" src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/2020-09-29wxls/other/skisVoteApp20240115/three.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="mingci">第3名</view>
								<view class="title">{{ tableData[2].title }}</view>
								<view class="voteNum">{{ tableData[2].voteNum }}票</view>
							</view>
						</view>
					</view>
					<view v-if="tableData.length > 3">
						<view class="item-rank-box item-rank-box-title">
							<view class="one one-title">排名</view>
							<view class="two two-title">名称</view>
							<view class="three three-title">票数</view>
						</view>
						<view class="item-rank-box item-rank-box-content" v-for="(item,index) in tableData.slice(3)" :key="item.id">
							<view class="one one-qqq">
								<view class="one-quanquan">{{ index + 4 }}</view>
							</view>
							<view class="two">{{ item.title }}</view>
							<view class="three">{{ item.voteNum }}票</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import cumLoading from '@/components/cum-loading/cum-loading.vue'
	import * as api from '@/server/getData.js'
	export default {
		components:{cumLoading},
		data(){
			return {
				loadPage:true,
				listQuery: {
					page: 1, // 当前的页码
					limit: 20, // 一页显示几条
					total: 0 // 总条数
				},
				tableData: [], // 数据列表
				isLoading: false,
			}
		},
		onLoad(){
			this.init_load()
		},
		async onPullDownRefresh() {
			try{
				this.resetData()
				await this.get_lists() //列表 
			}catch(e){
				//TODO handle the exception
			}finally{
				uni.stopPullDownRefresh()
			}
		},
		methods:{
			async init_load(){
				try{
					await this.get_lists() //列表
				}catch(e){
					//TODO handle the exception
				}finally{
					this.loadPage = false
				}
			},
			async get_lists() {
				if (this.isLoading) return
				try {
					this.isLoading = true
					const res = await api.work.rankList({
						size: this.listQuery.limit,
						page: this.listQuery.page
					})
					this.tableData = this.tableData.concat(res.records)
					this.listQuery.total = Math.ceil(res.total / this.listQuery.limit)
					if (this.listQuery.page < this.listQuery.total) {
						this.isLoading = false
						this.listQuery.page = this.listQuery.page + 1
					} else {
						this.isLoading = true
					}
				} catch (e) {
					this.isLoading = false
				} finally {
					
				}
			},
			resetData(){
				this.isLoading = false
				this.listQuery.page = 1
				this.listQuery.limit = 10
				this.listQuery.total = 0
				this.tableData = []
			},
			enterMyCard(){
				h5uni.navigateTo({
					url: `/pages/webview/index?url=https://wap2.wxls.pro/coupon/?time=${new Date().getTime()}#/pages/coupon/myCoupon?commodityType=0&time=${new Date().getTime()}`, // 跳转个人卡包
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		.rank-container{
			height: 100%;
			.rank-scroll-view-container-wb{
				height: 100%;
				background-color: #7fbffb;
				.rank-scroll-view-container{
					height: 100%;
					.header{
						width: 100%;
						font-size: 0;
						position: relative;
						.header-img{
							width: 100%;
						}
						.myPrize{
							font-size: 30rpx;
							position: absolute;
							bottom: 10rpx;
							right: 0;
							background-color: rgba(0, 0, 0, .6);
							color: #FFF;
							padding: 4rpx 14rpx 4rpx 20rpx;
							border-top-left-radius: 30rpx;
							border-bottom-left-radius: 30rpx;
						}
					}
					.rank-title{
						color: #FFF;
						font-size: 40rpx;
						padding-top: 14rpx;
						padding-bottom: 14rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						.huaxueIcon{
							font-size: 50rpx;
							padding-left: 10rpx;
							padding-right: 10rpx;
						}
					}
					.rank-centent{
						background-color: #FFF;
						border-top-left-radius: 30rpx;
						border-top-right-radius: 30rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						.two-container-top{
							display: flex;
							justify-content: space-between;
							padding-top: 50rpx;
							padding-bottom: 60rpx;
						}
						.matginT30{
							margin-top: 60rpx;
						}
						.two-container{
							flex: 1;
							flex-shrink: 0;
							.img-two-container{
								width: 140rpx;
								height: 140rpx;
								position: relative;
								margin: 0 auto;
								.img-two-img{
									position: absolute;
									width: 120rpx;
									height: 120rpx;
									border-radius: 100%;
									left: 10rpx;
								}
								.img-two-bg{
									width: 160rpx;
									position: absolute;
									bottom:0rpx;
									left: -10rpx;
								}
								.img-two-aaa{
									width: 100%;
								}
							}
							.img-one-container{
								width: 160rpx;
								height: 160rpx;
								.img-one-img{
									width: 140rpx;
									height: 140rpx;
								}
								.img-one-bg{
									width: 180rpx;
									left: -12rpx;
								}
							}
							.mingci{
								text-align: center;
								font-size: 32rpx;
							}
							.title{
								text-align: center;
								font-size: 30rpx;
								color: #999;
							}
							.voteNum{
								text-align: center;
								font-size: 30rpx;
							}
						}
						.item-rank-box{
							display: flex;
							font-size: 30rpx;
							.one{
								flex: 1;
								flex-shrink: 0;
								text-align: center;
							}
							.one-title{
								color: #FFF;
							}
							.one-qqq{
								display: flex;
								justify-content: center;
								align-items: center;
							}
							.one-quanquan{
								background-color: #7fbffb;
								width: 50rpx;
								height: 50rpx;
								border-radius: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								color: #FFF;
								font-size: 24rpx;
							}
							.two{
								flex: 2;
								flex-shrink: 0;
							}
							.two-title{
								color: #FFF;
							}
							.three{
								flex: 1;
								flex-shrink: 0;
							}
							.three-title{
								color: #FFF;
							}
						}
						.item-rank-box-title{
							background-color: #7fbffb;
							padding-top: 8rpx;
							padding-bottom: 8rpx;
							border-radius: 4rpx;
						}
						.item-rank-box-content{
							border-bottom: 1px solid #f6f6f6;
							padding-top: 14rpx;
							padding-bottom: 14rpx;
						}
					}
				}
			}
		}
	}
</style>